<template>
  <div class="container">
    <div class="header">
      <span>小智</span>
    </div>

    <div class="messages">
      <div class="message" v-for="(message, index) in messages" :key="index" :class="{'mine': message.isMine}">
        <div class="message-content">
          <v-md-editor
            :model-value="message.text"
            mode="preview"
          ></v-md-editor>
        </div>
      </div>
    </div>

    <div class="footer">
      <button class="clear-button" @click="clearMessages">清空聊天</button>
      <input type="text" v-model="inputText" placeholder="请输入您的问题或需求..." class="input-text" @keyup.enter="sendSSEMessageOnEnter">
      <button class="send-button" @click="sendSSEMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputText = ref(null);
const messages = ref([
  { text: "你好", isMine: true },
  { text: "你好，我是小智，有什么我能帮助你的吗？", isMine: false },
]);
let eventSource = null;

const sendSSEMessage = () => {
  if (!eventSource) {
    messages.value.push({ text: inputText.value, isMine: true });
    messages.value.push({ text: "", isMine: false });
    eventSource = new EventSource('http://localhost:8088/chat?content=' + inputText.value);
    inputText.value = '';

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      messages.value[messages.value.length - 1].text += data.result;
    };

    eventSource.onerror = (event) => {
      console.error("EventSource failed:", event);
      eventSource.close();
      eventSource = null;
    };
  }
};

const sendSSEMessageOnEnter = () => {
  if (inputText.value) {
    sendSSEMessage();
  }
};

const clearMessages = () => {
  messages.value = [];
};
</script>

<style scoped>
/* 设置容器样式 */
.container {
  display: flex; /* 使用 Flex 布局 */
  flex-direction: column; /* 垂直方向布局 */
  max-width: 1000px; /* 最大宽度为 800px */
  margin: 0 auto; /* 左右居中 */
  height: 100vh; /* 高度占满视口高度 */
  border: 1px solid #ccc; /* 边框为1px实线，颜色为 #ccc */
}

/* 设置头部样式 */
.header {
  background-color: #007BFF; /* 蓝色背景 */
  padding: 15px; /* 内边距为 15px */
  color: white; /* 文字颜色为白色 */
  text-align: center; /* 文字居中对齐 */
  font-size: 1.5rem; /* 字体大小为 1.5rem */
}

/* 设置消息区域样式 */
.messages {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* Y轴溢出时显示滚动条 */
  padding: 8px; /* 内边距为 20px */
  background-color: #f7f7f7; /* 浅灰色背景 */
}

/* 设置消息盒子样式 */
.message {
  display: flex; /* 使用 Flex 布局 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 10px; /* 底部外边距为 10px */
}

/* 设置自己发送消息盒子样式 */
.message.mine {
  justify-content: flex-end; /* 右对齐 */
}

/* 设置消息内容样式 */
.message-content {
  background-color: #e0e0e0; /* 淡灰色背景 */
  padding: 10px; /* 内边距为 10px */
  border-radius: 10px; /* 圆角半径为 10px */
  max-width: 700px; /* 限制消息框的最大宽度 */
  width: 600px;
  text-align: left;
  word-wrap: break-word; /* 自动换行 */
  white-space: pre-wrap; /* 保持空格和换行符 */
}

/* 设置自己发送消息内容样式 */
.message.mine .message-content {
  background-color: #cce5ff; /* 淡蓝色背景 */
}

/* 设置底部样式 */
.footer {
  display: flex; /* 使用 Flex 布局 */
  padding: 15px; /* 内边距为 15px */
  background-color: white; /* 白色背景 */
  border-top: 1px solid #ccc; /* 顶部边框为1px实线，颜色为 #ccc */
}

/* 输入框样式 */
.input-text {
  flex: 1; /* 占据剩余空间 */
  padding: 10px; /* 内边距为 10px */
  border: 1px solid #ccc; /* 边框为1px实线，颜色为 #ccc */
  border-radius: 5px; /* 圆角半径为 5px */
  margin-right: 10px; /* 右边外边距为 10px */
}

/* 清空按钮样式 */
.clear-button {
  background-color: #dc3545; /* 红色背景 */
  color: white; /* 文字颜色为白色 */
  padding: 10px 20px; /* 上下内边距为 10px，左右内边距为 20px */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角半径为 5px */
  cursor: pointer; /* 鼠标移上变为手型 */
  margin-right: 10px; /* 右边外边距为 10px */
}

/* 鼠标移上清空按钮样式 */
.clear-button:hover {
  background-color: #c82333; /* 深红色背景 */
}

/* 发送按钮样式 */
.send-button {
  background-color: #007BFF; /* 蓝色背景 */
  color: white; /* 文字颜色为白色 */
  padding: 10px 20px; /* 上下内边距为 10px，左右内边距为 20px */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角半径为 5px */
  cursor: pointer; /* 鼠标移上变为手型 */
}

/* 鼠标移上发送按钮样式 */
.send-button:hover {
  background-color: #0056b3; /* 深蓝色背景 */
}

</style>